// echarts-for-react会导致全量引入。
// 在该目录下封装常用的图表，比如折线图、柱状图。并且统一配置风格。按需引入
// 先封装一个原版的使用echarts-for-react以兼容之。后续弄好了就删除。
import React from "react";
import ReactEcharts from "echarts-for-react";
import getConfigs from "./echarts.config";

class MyEcharts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            options: getConfigs([], [])
        }
    }

    // ready回调
    // onChartReadyCallback() {
    // }

    // 在组件更新时执行操作
    componentDidUpdate(prevProps) {
        // 检查 data 是否发生变化
        if (this.props.data !== prevProps.data) {
            const {names, values} = this.props;
            this.setState({
                options: getConfigs(names, values)
            })
        }
    }


    render() {
        const {options} = this.state
        return (
            <ReactEcharts
                option={options}
                notMerge={true}
                lazyUpdate={true}
                theme="theme"
                // onChartReady={this.onChartReadyCallback} //表格渲染好后触发
                // onEvents={EventsDict}//此处需要一个事件对象
                className="reactEcharts"
            />
        )
    }
}

export default MyEcharts;